<template>
  <view class="tablet">
    <u-toast ref="uToast" />
    <view class="tablet_img">
      <image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/guanlianshebei.png" mode=""></image>
    </view>
    <view class="title-names" style="font-size: 28rpx;">
      <text class="vue-number-names">设备SN&nbsp;&nbsp;{{snCode}}</text>
    </view>
    <view class="confirm-txt">请等待平板电脑确认</view>
    <view class="vue-button">
      <button type="button" class="button" @click="getbindParentSn">绑定设备</button>
    </view>
  </view>
</template>

<script>
import {
  bindParentSn,
  getFlatIsSuccess
} from '@/api/addTablet.js'
export default {
  data() {
    return {
      snCode: ''
    }
  },
  onLoad(options) {
    this.snCode = options.result;
  },
  methods: {
    //绑定平板
    getbindParentSn() {
      if (this.snCode == '') return this.$refs.uToast.show({
        title: '请先输入设备码或扫描平板的二维码',
        type: 'error '
      })
      let qs = {
        snCode: this.snCode
      }
      bindParentSn(qs).then(res => {
        this.snTimeout();
      }).catch(err => {
        this.$refs.uToast.show({
          title: err.msg,
          type: 'error',
          icon: false
        })
      })
    },
    //定时任务,获取平板的确认消息，30秒-每次5秒一次请求
    snTimeout() {
      uni.showLoading({
        title: "加载中"
      });
      let that = this;
      var num = 0;
      var num2 = 0;
      var max = 5;
      var max2 = 30;

      function time2() {
        num2++;
        if (num2 < max2) {
          setTimeout(time2, 1000);
        } else {
          if (num2 == 30) {
            uni.showToast({
              title: "请重试",
              icon: "none",
              duration: 1500
            });
          }
        }
      }
      setTimeout(time2, 1000);

      function time() {
        num++;
        if (num < max) {
          setTimeout(time, 1000);
        } else {
          console.log("每隔5秒发送一次请求", num2, max2, that.snCode);
          getFlatIsSuccess({
            sn: that.snCode
          }).then(res => {
            num2 = 30;
            that.$refs.uToast.show({
              title: '绑定设备成功',
              icon: false,
              type: 'success',
              isTab: true,
              url: '/pages/userHome/index'
            })
          }).catch(err => {
            console.log('失败走到这', err)
            if (num2 < max2) {
              setTimeout(time, 1000);
            }
          })
          num = 0;
        }
      }
      setTimeout(time, 1000);
    }
  }
}
</script>

<style lang="scss" scoped>
.tablet {
  width: 100%;
  height: 100vh;
  // background-image: -webkit-linear-gradient(90deg, #4b74e6 0%, #8a56e9 100%);
  background-color: #ffffff;
  color: #ffffff;

  image {
    height: 100%;
    width: 100%;
  }

  .tablet_img {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    width: 438rpx;
    height: 297rpx;
  }

  .title-names {
    height: 30rpx;
    margin: auto;
    position: absolute;
    width: 100%;
    top: 55%;
    text-align: center;
    font-size: 24rpx;
    line-height: 20rpx;
    letter-spacing: 2rpx;
    color: #000000;
  }

  .confirm-txt {
    height: 30rpx;
    margin: auto;
    position: absolute;
    width: 100%;
    bottom: 15%;
    text-align: center;
    font-size: 24rpx;
    line-height: 20rpx;
    letter-spacing: 2rpx;
    color: #000000;
  }

  .vue-input {
    height: 100rpx;
    margin: auto;
    margin-top: 30px;
    width: 90%;
    left: 5%;
    position: absolute;
    bottom: 160rpx;
    line-height: 100rpx;
    border-radius: $uni-border-radius-lg;
    font-size: 32rpx;
    background-color: #e2e2e2;
    line-height: 60rpx;
    color: #333333;
    letter-spacing: 2rpx;
    overflow: hidden;

    input {
      height: 100rpx;
      border: none;
      background-color: #e2e2e2;
      color: #333333;
      padding-left: 20rpx;
    }

    .scanCode {
      padding: 20rpx;
      width: 100rpx;
    }
  }

  .vue-button {
    position: absolute;
    height: 100rpx;
    bottom: 5%;
    width: 90%;
    left: 5%;
    border: none;
    margin: auto;
    overflow: hidden;
    text-align: center;

    .button {
      height: 100rpx;
      margin: 0 auto;
      line-height: 100rpx;
      font-size: 36rpx;
      overflow: hidden;
      background-color: #4880ff;
      letter-spacing: 4rpx;
      border: none;
      border: 2rpx solid #4880ff;
      border-radius: $uni-border-radius-lg;
      color: #ffffff;
    }
  }
}
</style>
